<template>
  <div class="app-container">
    <el-row :gutter="20" class="recommendation-header">
      <el-col :span="24">
        <h3>为您推荐的职位</h3>
        <p>基于您的专业和技能为您智能匹配最合适的职位</p>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" v-loading="loading">
      <el-col
        v-for="(job, index) in jobsList"
        :key="job.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
      >
        <el-card class="job-card" shadow="hover">
          <div class="job-header">
            <span class="job-title">{{ job.title }}</span>
            <el-tag type="success" size="mini" v-if="job.matchScore">匹配度: {{ Math.round(job.matchScore * 100) }}%</el-tag>
          </div>
          <div class="job-content">
            <div class="job-info">
              <span class="job-label">公司名称:</span>
              <span class="job-value">{{ job.companyName }}</span>
            </div>
            <div class="job-info">
              <span class="job-label">职位描述:</span>
              <span class="job-value">{{ truncateText(job.description, 50) }}</span>
            </div>
            <div class="job-info">
              <span class="job-label">职位要求:</span>
              <span class="job-value">{{ truncateText(job.requirements, 50) }}</span>
            </div>
            <div class="job-info">
              <span class="job-label">薪资范围:</span>
              <span class="job-value">{{ job.salaryMin }} - {{ job.salaryMax }}</span>
            </div>
            <div class="job-info">
              <span class="job-label">工作地点:</span>
              <span class="job-value">{{ job.location }}</span>
            </div>
            <div class="job-info">
              <span class="job-label">职位类型:</span>
              <span class="job-value">
                <dict-tag :options="dict.type.job_type" :value="job.jobType"/>
              </span>
            </div>
          </div>
          <div class="job-footer">
            <el-button type="primary" size="mini" @click="handleDetails(job)">查看详情</el-button>
            <el-button type="success" size="mini" @click="handleApply(job)">立即申请</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 职位详情对话框 -->
    <el-dialog :title="jobDetail.title" :visible.sync="dialogVisible" width="50%">
      <div class="job-detail-container">
        <div class="job-detail-section">
          <h4>公司信息</h4>
          <p>{{ jobDetail.companyName }}</p>
        </div>
        <div class="job-detail-section">
          <h4>职位描述</h4>
          <p>{{ jobDetail.description }}</p>
        </div>
        <div class="job-detail-section">
          <h4>职位要求</h4>
          <p>{{ jobDetail.requirements }}</p>
        </div>
        <div class="job-detail-section">
          <h4>薪资范围</h4>
          <p>{{ jobDetail.salaryMin }} - {{ jobDetail.salaryMax }}</p>
        </div>
        <div class="job-detail-section">
          <h4>工作地点</h4>
          <p>{{ jobDetail.location }}</p>
        </div>
        <div class="job-detail-section">
          <h4>职位类型</h4>
          <p>
            <dict-tag :options="dict.type.job_type" :value="jobDetail.jobType"/>
          </p>
        </div>
        <div class="job-detail-section" v-if="jobDetail.matchScore">
          <h4>匹配度</h4>
          <el-progress :percentage="Math.round(jobDetail.matchScore * 100)" status="success"></el-progress>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleApply(jobDetail)">立即申请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listRecommendJobs } from "@/api/job/recommend";
import { addApplications } from "@/api/job/applications";
import { getResumeLists } from "@/api/job/resumes";
import dict from "@/utils/dict";

export default {
  name: "JobRecommendation",
  dicts: ['job_type', 'job_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 职位推荐列表
      jobsList: [],
      // 对话框显示
      dialogVisible: false,
      // 职位详情
      jobDetail: {},
      // 表单参数
      form: {}
    };
  },
  created() {
    this.getRecommendations();
  },
  methods: {
    dict,
    // 文本截断
    truncateText(text, maxLength) {
      if (!text) return '';
      return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
    },
    // 获取推荐职位
    getRecommendations() {
      this.loading = true;
      listRecommendJobs().then(response => {
        this.jobsList = response.rows;
        this.loading = false;
      });
    },
    // 显示职位详情
    handleDetails(job) {
      this.jobDetail = job;
      this.dialogVisible = true;
    },
    // 申请职位
    handleApply(job) {
      this.form.jobId = job.id;
      this.form.companyId = job.companyId;
      const userid = this.$store.state.user.id;
      
      // 获取简历
      getResumeLists(userid).then(response => {
        if(response.data.length > 0) {
          this.form.studentId = userid;
          this.form.resumeId = response.data[0].id;
          this.form.coverLetter = response.data[0].filePath;
          
          // 提交申请
          addApplications(this.form).then(response => {
            this.$modal.msgSuccess("申请成功");
            this.dialogVisible = false;
          });
        } else {
          this.$modal.msgWarning("请先上传简历后再申请");
          this.$router.push('/job/resumes');
        }
      });
    }
  }
}
</script>

<style scoped>
.recommendation-header {
  margin-bottom: 20px;
}
.recommendation-header h3 {
  margin: 0;
  font-size: 20px;
}
.recommendation-header p {
  margin: 5px 0 0;
  color: #606266;
}
.job-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}
.job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.job-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}
.job-content {
  margin-bottom: 15px;
}
.job-info {
  margin-bottom: 5px;
}
.job-label {
  font-weight: bold;
  margin-right: 5px;
  color: #606266;
}
.job-value {
  color: #303133;
}
.job-footer {
  display: flex;
  justify-content: space-between;
}
.job-detail-container {
  padding: 0 10px;
}
.job-detail-section {
  margin-bottom: 15px;
}
.job-detail-section h4 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #303133;
}
.job-detail-section p {
  margin: 0;
  color: #606266;
  white-space: pre-line;
}
</style> 